<template>
	<view>
		<view class="back w-750 h-300"></view>
		<view class="content">
			<view class="c_bai t_c p-t-60 p-b-60 f-35">订单状态：{{status}}</view>
			<view class="w-700 m-l-25 m-r-25 b_bai br-20">
				<!-- 车主详情 -->
				<view class="d_flex d_flex_between d_flex_items_center p-50 borderB" v-if="type">
					<view>
						<view class="f-32 color333 f-wb">车主:{{order.product.nickname}}</view>
						<view class="m-t-20 m-b-20"><u-rate v-model="order.product.star" :disabled="true"></u-rate></view>
						<view class="f-24 color333" @click="call(order.product.mobile)">
							<u-icon name="phone-fill" color="#2979ff" size="28"></u-icon>
							<text class="p-l-10">拨打电话：{{order.product.mobile}}</text>
						</view>
					</view>
					<view>
						<image :src="order.product.avatar" class="w-120 h-120"></image>
					</view>
				</view>
				<view class="d_flex d_flex_between d_flex_items_center p-50 borderB" v-else>
					<view>
						<view class="f-32 color333 f-wb">司机:{{order.consumer.nickname || '暂无司机接单'}}</view>
						<view class="m-t-20 m-b-20"><u-rate v-model="order.consumer.star" :disabled="true"></u-rate></view>
						<view class="f-24 color333" @click="call(order.consumer.mobile)">
							<u-icon name="phone-fill" color="#2979ff" size="28"></u-icon>
							<text class="p-l-10">拨打电话：{{order.consumer.mobile || '暂无'}}</text>
						</view>
					</view>
					<view>
						<image :src="order.consumer.avatar" class="w-120 h-120"></image>
					</view>
				</view>
				<view class="p-50">
					<view class="f-36 color333 f-wb">佣金</view>
					<view class="t_c f-48 color-ff822c p-t-20 f-wb">￥{{money}}</view>
					<view class="t_c f-26 color999 p-t-20">费用(元)</view>
				</view>
				<view class="p-50">
					<view class="f-36 color333 f-wb">支付方式</view>
					<view class="t_c f-36 color-ff822c p-t-20 f-wb">线下交易</view>
					<view class="t_c f-26 color999 p-t-20"></view>
				</view>
			</view>
			<view class="br-20 w-700 m-25 b_bai">
				<view class="p-50">
					<view class="f-36 color333 f-wb p-b-25">订单信息</view>
					<view class="f-26 d_flex d_flex_items_center h-60">
						<text class="color333">订单编号：</text>
						<text class="color999">{{order.order_id}}</text>
					</view>
					<view class="f-26 d_flex d_flex_items_center h-60">
						<text class="color333">车辆种类：</text>
						<text class="color999">{{order.car_type}}</text>
					</view>
					<view class="f-26 d_flex d_flex_items_center h-60">
						<text class="color333">施工时间：</text>
						<text class="color999">{{order.worktimestart}} 至 {{order.worktimeend}}</text>
					</view>
					<view class="f-26 d_flex d_flex_items_center h-60">
						<text class="color333">施工地点：</text>
						<text class="color999">{{order.workplace}}</text>
					</view>
					<view class="f-26 d_flex d_flex_items_center h-60">
						<text class="color333">取车位置：</text>
						<text class="color999">{{order.carnowaddress}}</text>
					</view>
				</view>
			</view>
			<navigator open-type="navigateBack" hover-class="none">
				<view class="btn">返回上层</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				starVal:5,
				order:{},
				status:"",
				type:1,
				money:""
			}
		},
		onLoad(val){
			console.log(val)
			this.type = Number(val.type)
			this.getInfo(val.id)
		},
		methods:{
			async getInfo(id){
				let result = await this.$request.post('/api/common/orderDetail',{
					oid:id
				})
				console.log(result)
				let data = result.data.data 
				this.status = data.status
				this.order = data.order
				this.money = data.money
			},
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone 
				});
			}
		}
	}
</script>

<style lang="scss">
	.back{
		background:#0055fe;
	}
	.content{
		position:absolute;
		top:0;
		left:0;
		.color-ff822c{
			color:#ff822c;
		}
		.btn{
			width:700rpx;
			margin:50rpx 25rpx;
			background:#0055fe;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
		}
	}
</style>
